<template>
  <!-- 全局变量 -->
  <div class='customer-manage'>
    <div class="content-header flex justify-between align-center padding-bottom">
      <div>全局变量列表</div>
      <div>
        <el-button type="primary"
                   @click="add"
                   size="small">新增</el-button>
      </div>
    </div>
    <Search :searchList="searchList"
            @searchSubmit="searchSubmit" />
    <IesTable :loading="iesTableLoading"
              :tableData="tableData"
              :theadData="theadData"
              :paginationOptions="paginationOptions"
              @tableSizeChange="tableSizeChange"
              @tableCurrentChange="tableCurrentChange"
              @edit="edit"
              @del="del" />
    <IesDialog title="编辑"
               height="300px"
               :iesDialogFlag.sync="dialoghVisible"
               @cancel="cancel"
               @affirm="affirm"
               width="800px">
      <div>
        <IesForm label-width="125px"
                 ref="form"
                 :formList="formList"
                 :ruleForm="ruleForm"
                 :rules="rules" />

      </div>
    </IesDialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      enterType: 'add',
      iesTableLoading: false,
      dialoghVisible: false,
      searchList: [
        {
          label: 'IMEI',
          type: 'input',
          value: '',
          name: 'nickname',
          placeholder: '请输入IMEI'
        }, {
          label: '设备ID',
          type: 'input',
          value: '',
          name: 'username',
          placeholder: '请输入设备ID'
        }, {
          label: '代理商名称',
          type: 'select',
          value: '',
          name: 'email',
          selectOptions: [
            {
              label: '女',
              value: 0
            },
            {
              label: '男',
              value: 1
            }
          ],
          placeholder: '请输入代理商名称'
        }
      ],
      tableData: [],
      theadData: [
        {
          prop: 'index',
          label: '序号',
          align: 'center'
        },
        {
          prop: 'name',
          label: '参数名称',
          align: 'center'
        },
        {
          prop: 'code',
          label: '参数值',
          align: 'center'
        },
        {
          prop: 'type',
          label: '参数说明',
          align: 'center'
        },
        {
          prop: 'createdate',
          label: '时间',
          align: 'center'
        },
        {
          prop: 'operation',
          label: '操作',
          width: '150px',
          align: 'center',
          options: {
            edit: true,
            delete: true
          }
        }
      ],
      paginationOptions: { // 分页属性
        current: 1, // 当前页
        count: 0, // 总页数后台返回的字段是pages
        size: 10, // 每页多少条
        total: 0, // 共多少条
        sizes: [10, 20, 30, 40]// 每页多少条
      },
      page: { // 请求分页列表接口的参数定义
        pageIndex: 1,
        pageSize: 10
      },
      formList: [
        {
          label: '用户名',
          type: 'input',
          name: 'nickname',
          placeholder: '用户名'
        },
        {
          label: '登录名',
          type: 'input',
          name: 'username',
          placeholder: '登录名'
        },
        {
          label: '性别',
          type: 'select',
          name: 'gender',
          placeholder: '性别',
          selectOptions: [
            {
              label: '女',
              value: 0
            },
            {
              label: '男',
              value: 1
            }
          ]
        }, {
          label: '状态',
          type: 'select',
          name: 'state',
          placeholder: '状态',
          selectOptions: [
            {
              label: '禁用',
              value: 0
            },
            {
              label: '启用',
              value: 1
            },
            {
              label: '锁定',
              value: 2
            }
          ]
        },
        {
          label: '联系电话',
          type: 'input',
          name: 'phone',
          prop: 'phone',
          placeholder: '联系电话'
        },
        {
          label: '密码',
          type: 'input',
          name: 'password',
          placeholder: '密码'
        },
        {
          label: '确认密码',
          type: 'input',
          name: 'password2',
          placeholder: '确认密码'
        },
        {
          label: 'E-mail',
          type: 'input',
          name: 'email'
        }, {
          label: '部门',
          type: 'select',
          name: 'departmentId',
          prop: 'departmentId',
          placeholder: '部门',
          selectOptions: [
            {
              label: '超级管理员',
              value: 1
            },
            {
              label: '运营',
              value: 2
            },
            {
              label: '商务',
              value: 3
            },
            {
              label: '厂商',
              value: 4
            },
            {
              label: '渠道方',
              value: 5
            }
          ]
        }, {
          label: '角色',
          type: 'select',
          name: 'roleId',
          prop: 'roleId',
          placeholder: '角色',
          selectOptions: [
            {
              label: '超级管理员',
              value: 1
            },
            {
              label: '运营',
              value: 2
            },
            {
              label: '商务',
              value: 3
            },
            {
              label: '厂商',
              value: 4
            },
            {
              label: '渠道方',
              value: 5
            }
          ]
        }

      ],
      ruleForm: {
        username: '',
        nickname: '',
        phone: '',
        gender: 1,
        remark: '',
        state: '',
        departmentId: '',
        roleId: '',
        id: ''
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        departmentId: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ],
        roleId: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ]

      }
    }
  },
  created() { // 生命周期 - 创建完成（可以访问当前this实例）
    this.getTableData()
  },
  methods: { // 方法集合
    getTableData() {
      this.$api.rules.getPageList({ data: this.page, method: 'post' }).then(res => {
        this.tableData = res.data
        this.paginationOptions.current = res.current
        this.paginationOptions.size = res.size
        this.paginationOptions.total = res.total
      })
    },
    tableSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    tableCurrentChange(val) {
      this.page.pageIndex = val
      this.getTableData()
    },
    searchSubmit(data) {
      this.page = Object.assign(this.page, data)
      this.getTableData()
    },
    edit(item) {
      this.enterType = 'edit'
      this.$api.rules.info({ data: { id: item.id } }).then(res => {
        Object.keys(this.ruleForm).forEach(key => {
          if (res[key] !== undefined) {
            this.ruleForm[key] = res[key]
          }
        })
      })
      this.dialoghVisible = true
    },
    add() {
      this.enterType = 'add'
      this.ruleForm.id = ''
      this.dialoghVisible = true
    },
    del(item) {
      this.$confirm('此操作将该数据删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.rules.delete({ data: { id: item.id }, method: 'post' }).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功！',
            type: 'success',
            duration: '3000'
          })
          this.cancel()
          this.getTableData()
        })
      })
    },
    cancel() {
      this.dialoghVisible = false
    },
    affirm() {
      const data = this.$refs.form.submit()

      if (!data) {
        return
      }
      const apiName = this.enterType === 'edit' ? 'update' : 'add'
      this.$api.rules[apiName]({ data: this.ruleForm, method: 'post' }).then(res => {
        this.$notify({
          title: '成功',
          message: `用户${this.enterType === 'edit' ? '编辑' : '添加'}成功！`,
          type: 'success',
          duration: '3000'
        })
        this.cancel()
        this.getTableData()
      })
    }
  }

}
</script>
<style lang='scss' scoped >
</style>
